<template>
	<div class="oauth-test-container">
		<van-nav-bar title="OAuth登录测试" left-text="返回" left-arrow @click-left="$router.back()" />

		<div class="test-content">
			<van-cell-group>
				<van-cell title="当前登录状态" :value="loginStatusText" />
				<van-cell title="用户Token" :value="userToken || '无'" />
				<van-cell title="用户信息" :value="userInfo ? '已获取' : '无'" />
			</van-cell-group>

			<div class="action-section">
				<van-button type="primary" block @click="testGetAuthUrl"> 获取OAuth授权URL </van-button>

				<van-button type="primary" block @click="testDirectLogin" style="margin-top: 12px"> 固定OpenID登录 </van-button>

				<van-button type="warning" block @click="clearCache" style="margin-top: 12px"> 清除缓存 </van-button>

				<van-button type="danger" block @click="logout" style="margin-top: 12px"> 退出登录 </van-button>
			</div>

			<div class="info-section" v-if="testResult">
				<h3>测试结果:</h3>
				<pre>{{ testResult }}</pre>
			</div>
		</div>
	</div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { showToast, showConfirmDialog } from 'vant'

export default {
	name: 'OAuthTest',
	setup() {
		const router = useRouter()
		const userStore = useUserStore()

		const testResult = ref('')

		// 计算属性
		const loginStatusText = computed(() => {
			if (userStore.isAuthenticated) {
				return '已登录'
			}
			return '未登录'
		})

		const userToken = computed(() => userStore.token)
		const userInfo = computed(() => userStore.userInfo)

		// 测试获取OAuth授权URL
		const testGetAuthUrl = async () => {
			try {
				const authUrl = await userStore.getOAuthUrl()
				testResult.value = `OAuth URL: ${authUrl}`

				// 确认是否要跳转
				const result = await showConfirmDialog({
					title: '获取成功',
					message: '是否要跳转到授权页面？',
				})

				if (result === 'confirm') {
					window.location.href = authUrl
				}
			} catch (error) {
				testResult.value = `获取OAuth URL失败: ${error.message}`
				showToast('获取授权URL失败')
			}
		}

		// 测试直接登录
		const testDirectLogin = async () => {
			try {
				const result = await userStore.ensureLogin()
				testResult.value = `登录成功: ${JSON.stringify(result, null, 2)}`
				showToast('登录成功')
			} catch (error) {
				testResult.value = `登录失败: ${error.message}`
				showToast('登录失败')
			}
		}

		// 清除缓存
		const clearCache = () => {
			userStore.logout()
			testResult.value = '缓存已清除'
			showToast('缓存已清除')
		}

		// 退出登录
		const logout = () => {
			userStore.logout()
			testResult.value = '已退出登录'
			showToast('已退出登录')
		}

		// 检查URL参数
		const checkUrlParams = () => {
			const urlParams = new URLSearchParams(window.location.search)
			const code = urlParams.get('code')
			const error = urlParams.get('error')

			if (code) {
				testResult.value = `检测到OAuth回调 Code: ${code}`
				// 可以在这里测试loginWithCode
				testLoginWithCode(code)
			} else if (error) {
				testResult.value = `OAuth授权失败: ${error}`
			}
		}

		// 测试Code登录
		const testLoginWithCode = async (code) => {
			try {
				const result = await userStore.loginWithCode(code)
				testResult.value += `\n\nCode登录结果: ${JSON.stringify(result, null, 2)}`

				if (result.success) {
					showToast('Code登录成功')
				} else {
					showToast(`Code登录失败: ${result.code || result.error}`)
				}
			} catch (error) {
				testResult.value += `\n\nCode登录异常: ${error.message}`
				showToast('Code登录异常')
			}
		}

		onMounted(() => {
			checkUrlParams()
		})

		return {
			loginStatusText,
			userToken,
			userInfo,
			testResult,
			testGetAuthUrl,
			testDirectLogin,
			clearCache,
			logout,
		}
	},
}
</script>

<style lang="less" scoped>
.oauth-test-container {
	min-height: 100vh;
	background-color: #f7f8fa;
}

.test-content {
	padding: 16px;
}

.action-section {
	margin: 20px 0;
}

.info-section {
	margin-top: 20px;
	padding: 16px;
	background: white;
	border-radius: 8px;

	h3 {
		margin: 0 0 12px 0;
		font-size: 16px;
		font-weight: 600;
	}

	pre {
		background: #f5f5f5;
		padding: 12px;
		border-radius: 4px;
		font-size: 12px;
		overflow-x: auto;
		white-space: pre-wrap;
		word-break: break-all;
	}
}
</style>